// 需要渲染的节点
const renderTbody = document.querySelector('.renderTbody')
const renderTbodyImg = document.querySelector('.renderTbodyImg')

// 定义全局变量
var list = []
var index = 0

// 首次渲染节点
render(renderTbody, dataSource)
renderImg(renderTbodyImg, dataSource)

function render(node, data) {
    let innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        const element = data[i]
        innerHTML += `
            <div class="mb-3 py-3 px-4 rounded-5 bg-white li-item ${index == i ? 'actived' : ''}" onclick="handleClick(event,${i})">
                <p class="h5">
                    项目 ${element.name}
                </p>
                <div>地点 ${element.pos}</div>
                <div>时间 ${element.date}</div>
            </div>
        `
    }
    node.innerHTML = innerHTML
}

function renderImg(node, data) {
    let innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        const element = data[i]
        innerHTML += `
            <img class=" position-absolute ${index == i ? 'd-block' : 'd-none'}" src="${element.img}" alt="img"
                style="top:15%;left:15%;height: 60%;">
            <button type="button" class="btn btn-primary position-absolute rounded-pill btn-sm ${index == i ? 'd-block' : 'd-none'}"
                style="bottom:30px; right:30px;" onclick="handleClickImg()"
            >了解更多详情
            </button>
        `
    }
    node.innerHTML = innerHTML
}

const handleClick = (event, i) => {
    index = i
    render(renderTbody, dataSource)
    renderImg(renderTbodyImg, dataSource)
}

const handleClickImg = () => {
    showToast('暂无更多信息')
}